<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>yGraph</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
    <script type="text/javascript" src="js/common.js" ></script>
    <script type="text/javascript" src="js/graph.js" ></script>
    <script type="text/javascript" src="js/traverse.js" ></script>
    <script type="text/javascript" src="js/project.js" ></script>
    <!--    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>-->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="css/project.css" media="screen" />
    <link href="/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
  </head>
  <body class="yui3-skin-sam">
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <div class="row-fluid">
            <a class="brand span1" href="">yGraph</a>
            <div class="nav-collapse collapse span10">
              <ul class="nav">
                <li class="dropdown" id="load-toggle">
                  <a id="loadButton" class="dropdown-toggle" data-toggle="dropdown" 
                     role="button" href="#">
                    Laden
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu" role="menu" aria-labeledby="loadButton">
                    <li>
                      <a href="#" tabindex="-1" class="loaded" id="graphOne">Baum</a>
                    </li>
                    <li>
                      <a href="#" tabindex="-1" class="loaded" id="graphTwo">Kleiner Graph</a>
                    </li>
                    <li>
                      <a href="#" tabindex="-1" class="loaded" id="graphThree">Großer Graph</a>
                    </li>
                  </ul>
                </li>

                <li class="dropdown" id="edit-toggle">
                  <a id="editButton"class="dropdown-toggle" data-toggle="dropdown"
                     role="button" href="#">
                    Bearbeiten
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu" role="menu" aria-labeledby="loadButton">
                    <li><a href="#" class="loaded" id="deleteNodeButton">Knoten löschen</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" id="addNodeForm" data-toggle="dropdown">
                        Neuen Knoten hinzufügen <b class="caret"></b>
                      </a>
                      <div id="addNodeFormToggle" style="display:none;">
                        <input type="text" name="nodeValue" id="addNodeValue" class="span4" />
                        <button id="addNodeButton" class="loaded btn btn-success">Add</button>
                      </div>
                    </li>
                    <li><a href="#" class="loaded" id="deleteEdgeButton">Kante löschen</a></li>
                    <li><a href="#" class="loaded" id="addEdgeButton">Kante hinzufügen</a></li>
                  </ul>
                </li>


                <li class="divider"></li>
                <!--                <li><a href="#" id="loadButton">Laden</a></li>
                                <li><a href="#" id="safeButton">Speichern</a></li>-->
                <li><a href="#" id="traverseButton">Traversieren</a></li> 
                <li>
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                     role="button" id="generatorForm">
                    Generator
                    <b class="caret"></b>
                  </a>
                  <div id="generatorFormToggle" style="display:none;">
                    <input type="text" name="generatorValue" id="generatorValue" class="span4" />
                    <button id="generatorButton" class="loaded btn btn-success">Go!</button>
                  </div>
                </li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
          <div class="row-fluid">
            <div id="traverseFormToggle" class=" submenu form-inline" style="display:none">
              <!--     <div class="input-prepend span2">
                    <span class="add-on">Speed</span>
                     <input type="text" name="speed" class="span5" id="speed" value="1" />
                   </div> -->
              <!--                <div class="span4">
                                <label for="horiz_value">Speed: </label>
                                <input id="horiz_value" value="5" type="hidden">
                                <span class="horiz_slider"></span>
                              </div>-->
              <div class="input-prepend span2">
                <span class="add-on">Search</span>
                <input type="text" name="searchValue" class="span5" id="searchValue" />
              </div>
              <div  class="span2">
                <p id="speedSlider">Geschw.    </p>  
              </div>
              <div class="span2">
                <label class="checkbox">
                  <input type="radio" name="traverseAlgo" value="BFS" checked="checked"> BFS
                </label>
                <label class="checkbox">
                  <input type="radio" name="traverseAlgo" value="DFS"> DFS
                </label>
              </div>
              <button id="traverseButtonAction" class="btn btn-success">Start</button>
              <button id="traverseFormHide" class="btn">Hide</button>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="container" style="width:100%">
      <div class="notify" id="notifyAddEdge">
        Kante hinzufügen:<br>
        1. Auf den Quellknoten der neuen Kante klicken.<br>
        2. Auf den Zielknoten der Kante klicken.<br>
        3. Kante ist erstellt!<br>
        <br>
        Abbrechen mit ESC!
      </div>
      <div class="notify" id="notifyDeleteEdge">
        Kante löschen:<br>
        1. Bei jeder Kante erscheint ein Minussymbol.<br>
        2. Auf das Minussymbol der zu löschenden Kante klicken.<br>
        3. Kante ist gelöscht!<br>
        <br>
        Abbrechen mit ESC!
      </div>
      <div class="notify-top" id="notifyMultipleEdits">
        <p>Nach Aktion im aktuellen Zustand verbleiben:</p>
        <div class="btn-group">  
          <button class="btn" id="multipleEditsOn">Ein</button>
          <button class="btn btn-success" id="multipleEditsOff">Aus</button>
        </div>
      </div>
      <div class="notify-top" id="notifyTraverseOrderOuter">
        <div class="notify-action">
          <div class="btn-group">
            <button class="btn btn-success" id="traverseStart">Start</button>
            <button class="btn btn-danger" id="traverseStop">Stop</button>
          </div>
          <div class="btn-group">
            <button class="btn" id="traversePrev">Prev</button>
            <button class="btn btn-primary" id="traverseNext">Next</button>
          </div>
        </div>
        <p>Traversierungsreihenfolge:</p>
        <div id="notifyTraverseOrder">

        </div>
      </div>
      <div id="graphPool_outer">
        <div id="deleteEdgesPool">
        </div>
        <div id="graphPool">
        </div>
        <div id="graphGraphic">
        </div>
      </div>


      <footer>
        <p>&copy; Sponer | Steiner | Swietek - 2013 / Service Engineering PR</p>
      </footer>

    </div>
  </body>
</html>
